<template>
  <div>
    <aside
      class="pt-24 -mt-24 sticky top-0 overflow-y-auto h-screen pr-16 -mr-16"
      style="font-family: Helvetica Neue, sans-serif;"
    >
      <h3 class="mb-2 text-gray-500 uppercase tracking-wider font-bold">
        {{ $t('sidebar.title') }}
      </h3>
      <nav>
        <ul>
          <li
            v-for="(docs, category, index) in categories"
            :key="category"
            class="mb-4"
            :class="{ 'lg:mb-0': index === Object.keys(categories).length - 1 }"
          >
            <h3
              class="leading-6 text-gray-500 uppercase tracking-wider font-bold text-sm lg:text-xs hover:translate-x-1 py-2"
            >
              {{ category }}
            </h3>
            <ul>
              <li
                v-for="doc of docs"
                :key="doc.path"
                class="text-gray-700 dark:text-gray-300"
              >
                <NuxtLink
                  :to="localePath(doc.uniPath, $i18n.locale)"
                  class="px-2 rounded font-medium py-1 hover:text-primary-500 flex items-center justify-between"
                  exact-active-class="text-primary-500 bg-primary-100 hover:text-primary-500 dark:bg-primary-900"
                >
                  {{ doc.menuTitle || doc.title }}
                </NuxtLink>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </aside>
  </div>
</template>

<script>
import groupBy from 'lodash.groupby'
import CompSearch from '~/components/layout-comp/CompSearch'

export default {
  name: 'NcCompBlogSidebar',
  components: { CompSearch },
  props: {
    documents: Array,
  },
  computed: {
    categories() {
      this.documents.map((doc) => {
        doc.dirTitle = this.$store.state.pathTree[this.$i18n.locale][
          doc.uniDirPath
        ].title
      })
      return groupBy(this.documents, 'dirTitle')
    },
  },
}
</script>
